<template>
  <div class="buy-container">
    <el-card class="buy-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>购买页面</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 书籍信息 -->
      <div class="book-info">
        <el-image :src="bookData.image" class="book-image" fit="contain"></el-image>
        <div class="detail-info">
          <h1 class="book-title">{{ bookData.title }}</h1>
          <p class="book-author">作者：{{ bookData.author }}</p>
          <div class="price-section">
            <span class="price-label">价格：</span>
            <span class="price-value">¥{{ totalPrice }}</span>
          </div>
        </div>
        <div class="book-description">
          <h3 class="description-title">内容简介</h3>
          <p class="description-content">{{ bookData.description }}</p>
        </div>
      </div>

      <!-- 购买表单 -->
      <el-form ref="buyForm" :model="form" label-width="80px" class="buy-form">
        <el-form-item label="购买数量" prop="quantity">
          <el-input-number v-model="form.quantity" :min="1" :max="10" controls-position="right"></el-input-number>
        </el-form-item>

        <el-form-item label="支付方式" prop="payment">
          <el-radio-group v-model="form.payment">
            <el-radio label="alipay">支付宝</el-radio>
            <el-radio label="wechat">微信支付</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handlePayment" class="pay-button">立即支付</el-button>
          <el-button type="primary" class="pay-button" @click="handleAddToCart">加入购物车</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 右下角浮动购物车图标 -->
    <div class="cart-icon" @click="toggleCartPanel">
      <el-badge :value="cartCount" :max="99" show-zero>
        <img src="@/assets/img/cart.png" alt="购物车" class="cart-image" style="width: 32px; height: 32px;">
      </el-badge>
    </div>

    <!-- 购物车侧边栏 -->
    <el-drawer title="我的购物车" v-model="showCartPanel" size="400px" direction="rtl">
      <div class="cart-panel-content">
        <el-empty v-if="cartList.length === 0" description="购物车空空如也"></el-empty>
        <div v-else>
          <div v-for="(item, index) in cartList" :key="index" class="cart-item">
            <div class="cart-item-left">
              <img :src="item.image" alt="封面" width="60" height="80" />
            </div>
            <div class="cart-item-center">
              <p><strong>{{ item.title }}</strong></p>
              <p>单价：¥{{ item.price }}</p>
              <el-input-number v-model="item.quantity" :min="1" :max="10" size="mini" @change="updateCartItem(index)" />
            </div>
            <div class="cart-item-right">
              <el-button icon="el-icon-delete" circle @click="removeFromCart(index)"></el-button>
            </div>
          </div>
          <div class="cart-total">
            总计：¥{{ cartTotalPrice }}
          </div>
          <el-button type="primary" @click="checkoutCart" block style="margin-top: 20px;">去结算</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import book1 from '@/assets/img/book1.jpg'
import alipay from '@/assets/img/alipay.jpg'
import wechat from '@/assets/img/wechat.jpg'
import shuihu from '@/assets/img/shuihu.jpg'

export default {
  data() {
    return {
      bookData: {
        title: '',
        author: '',
        price: 0,
        image: ''
      },
      form: {
        quantity: 1,
        payment: 'alipay'
      },
      qrCodes: {
        alipay: alipay,
        wechat: wechat
      },
      // 购物车相关数据
      showCartPanel: false,
      cartList: []
    }
  },
  created() {
    this.getBookData()
  },
  computed: {
    totalPrice() {
      return (this.bookData.price * this.form.quantity).toFixed(2)
    },
    cartCount() {
      return this.cartList.reduce((sum, item) => sum + item.quantity, 0)
    },
    cartTotalPrice() {
      return this.cartList.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2)
    }
  },
  methods: {
    getBookData() {
      this.bookData = {
        title: '水浒传',  // 修改标题
        author: '施耐庵', // 修改作者
        price: 99.9,     // 建议调整价格
        image: shuihu,
        description: `《水浒传》是中国古典四大名著之一，以北宋末年宋江起义为故事背景，讲述了108位好汉在梁山泊聚义、替天行道，最终接受招安的政治传奇。作品生动刻画了宋江、林冲、武松、鲁智深等个性鲜明的英雄形象，展现了"官逼民反"的社会现实，被誉为中国历史上最早用白话文写成的章回小说之一。`
      }
    },
    handlePayment() {
      const qrCodeHtml = `<img src="${this.qrCodes[this.form.payment]}" style="width: 200px; margin-top: 15px;">`

      this.$confirm(
        `确认支付 ¥${this.totalPrice}<br>${qrCodeHtml}`,
        '支付确认',
        {
          confirmButtonText: '确认支付',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true,
          showCancelButton: true,
          center: true
        }
      ).then(() => {
        this.$message.success('支付成功！')
        this.$router.push('/')
      })
    },
    handleAddToCart() {
      const existingItem = this.cartList.find(item => item.title === this.bookData.title)

      if (existingItem) {
        existingItem.quantity += this.form.quantity
        this.$message.info('已将本书加入购物车')
      } else {
        this.cartList.push({
          title: this.bookData.title,
          author: this.bookData.author,
          price: this.bookData.price,
          quantity: this.form.quantity,
          image: this.bookData.image
        })
        this.$message.success('书籍已加入购物车')
      }
    },
    toggleCartPanel() {
      this.showCartPanel = !this.showCartPanel
    },
    updateCartItem(index) {
      this.$set(this.cartList, index, this.cartList[index])
    },
    removeFromCart(index) {
      this.cartList.splice(index, 1)
      this.$message.warning('已移除书籍')
    },
    checkoutCart() {
      if (this.cartList.length === 0) {
        this.$message.error('购物车为空')
        return
      }

      // 计算购物车总金额
      const total = this.cartTotalPrice
      const qrCodeHtml = `<img src="${this.qrCodes[this.form.payment]}" style="width: 200px; margin-top: 15px;">`

      this.$confirm(
        `确认支付总计 ¥${total}<br>${qrCodeHtml}`,
        '支付确认',
        {
          confirmButtonText: '确认支付',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true,
          showCancelButton: true,
          center: true
        }
      ).then(() => {
        this.$message.success('支付成功！')
        this.cartList = [] // 清空购物车
        this.$router.push('/')
      })
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.buy-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.buy-card {
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.book-info {
  display: flex;
  gap: 40px;
  margin: 30px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* 保持图片固定宽度 */
.book-image {
  width: 260px;
  height: 360px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  /* 禁止图片缩小 */
}

/* 右侧内容容器 */
.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 简介区块调整 */
.book-description {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.detail-info {
  flex: 1;
}

.book-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 15px;
}

.book-author {
  font-size: 16px;
  color: #606266;
  margin-bottom: 25px;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-label {
  font-size: 16px;
  color: #909399;
}

.price-value {
  font-size: 32px;
  color: #ff6b6b;
  font-weight: 600;
}

/* 新增书籍简介样式 */
.book-description {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.description-title {
  color: #444;
  font-size: 18px;
  margin-bottom: 12px;
}

.description-content {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  text-align: justify;
  text-indent: 2em;
}

.buy-form {
  margin-top: 40px;
  padding: 20px;
}

.pay-button {
  width: 200px;
  height: 50px;
  font-size: 18px;
  border-radius: 25px;
  position: relative;
  right: 100px;
}

/* 新增弹窗样式 */
.el-message-box {
  width: 420px !important;
}

.el-message-box__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 新增购物车样式 */
.cart-icon {
  position: fixed;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  z-index: 1000;
  padding: 8px;
  /* 适当留白 */
}

.cart-image {
  transition: transform 0.3s ease;
}

.cart-image:hover {
  transform: scale(1.1);
}

/* 调整徽标位置 */
/* .el-badge ::v-deep .el-badge__content {
  top: 8px;
  right: 8px;
} */

.cart-panel-content {
  padding: 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.cart-item img {
  border-radius: 4px;
}

.cart-item-left {
  flex: 1;
  text-align: center;
}

.cart-item-center {
  flex: 3;
  margin-left: 10px;
}

.cart-item-right {
  flex: 1;
  text-align: right;
}

.cart-total {
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  margin-top: 20px;
  color: #ff6b6b;
}
</style>